<template>
   <div class="base-info">
     <div class="avatar-wrapper">
       <van-image
          round
          width="48px"
          height="48px"
          fit="none"
          :src="userInfo.photo"
        />
     </div>
     <van-cell-group>
      <van-cell title="用户名" :value="userInfo.username" @click="handleResetInfo('username')" is-link/>
      <van-cell title="真实姓名" :value="userInfo.realname" @click="handleResetInfo('realname')" is-link/>
      <van-cell title="手机号" :value="userInfo.tel | cryptPhone"/>
    </van-cell-group>

    <van-dialog v-model="show" @confirm="handleConfirm" @cancel="show == false" :title="`修改${active == 'username' ? '用户名' : '真实姓名'}`" show-cancel-button>
      <div class="form-content">
        <p>请设置6-12位{{active == 'username' ? '用户名' : '真实姓名'}}</p>
        <van-field v-model="value" border label="" placeholder="" />
      </div>
    </van-dialog>
   </div>
</template>

<script>
import { mapGetters } from 'vuex';
import { updateUserInfoService } from '@/service/user';
export default {
   data () {
      return {
        // userinfo: {},
        show: false,
        active: 'username',
        value:''
      };
   },

   components: {},

   computed: {
     ...mapGetters(['userInfo'])
   },
   created(){
    //  this.userinfo = Object.assign({},this.userInfo)
   },

   methods: {
     handleResetInfo(info){
       this.show = true
       this.active = info
     },
     async handleConfirm(){
       let params = {};
       if(this.active == 'username'){
         params.username = this.value
       }else{
         params.realname = this.value
       }
       let result = await updateUserInfoService(params);
       if(result.status == 200){
         this.$store.dispatch('user/updateUserInfo')
         this.$toast('修改成功')
         setTimeout(() => {
           this.$router.replace({
             path: '/user/index'
           })
         },1500)
       }else{
         this.$toast(ressult.message)
       }
     }
   }
}
</script>
<style lang='less'>
.avatar-wrapper{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30px;
  img{
    border: 1px solid #999;
  }
}
  .form-content{
    padding: 15px 40px;
    text-align: center;
    color: #888;
    .van-field{
      border: 1px solid #ececec;
      margin-top: 20px;
    }
  }
</style>